import React from 'react';
import ReactDOM from 'react-dom';
import data from './demoData.json';
import moduleConfig from './moduleConfig';
import assets from './assets';
import RaArch from '../src';
import './index.less';

const App = () => (
  <RaArch
    data={data}
    moduleConfig={moduleConfig}
    assets={assets}
    appendActions={<div>hello</div>}
    registerList={[
      {
        name: 'arch-node',
        type: 'NODE',
        options: {
          inherit: 'rect',
          width: 100,
          height: 100,
          markup: [
            {
              tagName: 'rect',
              selector: 'body',
            },
            {
              tagName: 'text',
              selector: 'text',
            },
            {
              tagName: 'image',
              selector: 'backgorund',
              className: 'mainImage',
            },
            {
              tagName: 'image',
              selector: 'itemTag',
            },
          ],
          attrs: {
            body: {
              strokeWidth: 0,
              // stroke: 'transparent',
              fill: 'transparent',
            },
            text: {
              fontSize: 10,
              fill: '#262626',
              refY: '80%',
            },
            backgorund: {
              refX: '10%',
              refY: '10%',
              refWidth: '80%',
              refHeight: '50%',
              opacity: 0,
            },
            itemTag: {
              ref: 'backgorund',
              refX: '15%',
              refY: '15%',
              refWidth: '80%',
              refHeight: '80%',
              opacity: 1,
            },
          },
          ports: {
            groups: {
              top: {
                position: 'top',
                attrs: {
                  circle: {
                    r: 4,
                    magnet: true,
                    stroke: '#5F95FF',
                    strokeWidth: 1,
                    fill: '#fff',
                    style: {
                      visibility: 'hidden',
                    },
                  },
                },
              },
              right: {
                position: 'right',
                attrs: {
                  circle: {
                    r: 4,
                    magnet: true,
                    stroke: '#5F95FF',
                    strokeWidth: 1,
                    fill: '#fff',
                    style: {
                      visibility: 'hidden',
                    },
                  },
                },
              },
              bottom: {
                position: 'bottom',
                attrs: {
                  circle: {
                    r: 4,
                    magnet: true,
                    stroke: '#5F95FF',
                    strokeWidth: 1,
                    fill: '#fff',
                    style: {
                      visibility: 'hidden',
                    },
                  },
                },
              },
              left: {
                position: 'left',
                attrs: {
                  circle: {
                    r: 4,
                    magnet: true,
                    stroke: '#5F95FF',
                    strokeWidth: 1,
                    fill: '#fff',
                    style: {
                      visibility: 'hidden',
                    },
                  },
                },
              },
            },
            items: [
              {
                group: 'top',
              },
              {
                group: 'right',
              },
              {
                group: 'bottom',
              },
              {
                group: 'left',
              },
            ],
          },
        },
      },
    ]}
  />
);

ReactDOM.render(<App />, document.getElementById('root'));
